import React, { useContext, useEffect, useImperativeHandle, useInsertionEffect, useLayoutEffect, useReducer, useRef, useState } from 'react'

import { useCss } from './10-myHooks'

const App = () => {

  useEffect(()=>{
    console.log('useEffect');
  })

  useLayoutEffect(()=>{
    console.log('useLayoutEffect');
  })

  // 该 hooks 也是同步执行的，会在 DOM 更新之前被执行，还没有做绘制的时候执行
  // 在该 hooks 中可以进行样式的注入
  useInsertionEffect(()=>{
    console.log('useInsertionEffect');
  })

  useCss('<style> * { width: 100%; height: 100%; background-color: #f66; } </style>')

    return (
    <div >
      App
    </div>
  )
}
export default App